<main class="main">
    <mat-toolbar>
        <span>{{ AppName }}</span>
        <span class="spacer"></span>

        <!-- new profile -->
        <button mat-button (click)="newProfile()">
            <mat-icon>add</mat-icon>
            New Profile
        </button>

        <!-- edit profile -->
        <button mat-button (click)="editSelectedProfile()" [disabled]="selection.selected.length != 1">
            <mat-icon>edit</mat-icon>
            Edit Profile
        </button>

        <!-- import profile -->
        <button mat-button (click)="importProfile()">
            <mat-icon>download</mat-icon>
            Import Profile
        </button>

        <!-- delete profile  -->
        <button mat-button (click)="deleteProfiles()" [disabled]="selection.selected.length == 0">
            <mat-icon>delete</mat-icon>
            Delete Profiles
        </button>
         <!-- Export CSV -->
        <button mat-button (click)="exportToCSV()">
            <mat-icon>file_download</mat-icon>
            Export CSV
        </button>
        <!-- import profiles from CSV -->
        <button mat-button (click)="importProfilesFromCSV()">
            <mat-icon>file_upload</mat-icon>
            Import CSV
        </button>
    </mat-toolbar>

    <table mat-table [dataSource]="dataSource" matSort>
        <!-- Checkbox Column -->
        <ng-container matColumnDef="select">
            <th mat-header-cell *matHeaderCellDef>
                <mat-checkbox
                    (change)="$event ? toggleAllRows() : null"
                    [checked]="selection.hasValue() && isAllSelected"
                    [indeterminate]="selection.hasValue() && !isAllSelected"
                    [aria-label]="checkboxLabel()"
                >
                </mat-checkbox>
            </th>
            <td mat-cell *matCellDef="let row">
                <mat-checkbox
                    (click)="$event.stopPropagation()"
                    (change)="$event ? selection.toggle(row) : null"
                    [checked]="selection.isSelected(row)"
                    [aria-label]="checkboxLabel(row)"
                >
                </mat-checkbox>
            </td>
        </ng-container>

        <!-- name -->
        <ng-container matColumnDef="name" sticky>
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Name</th>
            <td mat-cell *matCellDef="let element" class="flex">
                <div class="flex-container">
                    <span class="content">
                        {{ element.basicInfo.profileName }}
                    </span>
                    <button mat-icon-button [matMenuTriggerFor]="menu" app-stop-propagation>
                        <mat-icon>more_vert</mat-icon>
                    </button>
                </div>

                <!-- menu  -->
                <mat-menu #menu="matMenu">
                    @if (browserLauncherService.getRunningStatus(element) == BrowserProfileStatus.Idle) {
                        <button mat-menu-item (click)="editProfile(element)">
                            <mat-icon>edit</mat-icon>
                            <span>Edit</span>
                        </button>

                        <button mat-menu-item (click)="deleteProfile(element)">
                            <mat-icon>delete</mat-icon>
                            <span>Delete</span>
                        </button>

                        <button mat-menu-item (click)="runBrowserProfile(element)">
                            <mat-icon>play_arrow</mat-icon>
                            <span>Run</span>
                        </button>
                    } @else if (browserLauncherService.getRunningStatus(element) == BrowserProfileStatus.Running) {
                        <button mat-menu-item (click)="stopBrowserProfile(element)">
                            <mat-icon>cancel</mat-icon>
                            <span>Stop</span>
                        </button>
                    }

                    <button mat-menu-item (click)="cloneProfile(element)">
                        <mat-icon>content_copy</mat-icon>
                        <span>Clone</span>
                    </button>

                    <button mat-menu-item (click)="exportProfile(element)">
                        <mat-icon>upgrade</mat-icon>
                        <span>Export</span>
                    </button>

                    @if (browserLauncherService.getRunningStatus(element) == BrowserProfileStatus.Idle) {
                        <button mat-menu-item (click)="warmupProfile(element)">
                            <mat-icon>local_fire_department</mat-icon>
                            <span>Warmup</span>
                        </button>
                    }
                </mat-menu>
            </td>
        </ng-container>

        <!-- group -->
        <ng-container matColumnDef="group">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Group</th>
            <td mat-cell *matCellDef="let element">
                {{ element.basicInfo.groupName }}
            </td>
        </ng-container>

        <!-- status -->
        <ng-container matColumnDef="status">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Status</th>
            <td mat-cell *matCellDef="let element" class="flex">
                <div class="flex-container">
                    <span class="content">
                        {{ browserLauncherService.getRunningStatusText(element) }}
                    </span>

                    @if (browserLauncherService.getRunningStatus(element) == BrowserProfileStatus.Idle) {
                        <button mat-icon-button app-stop-propagation (click)="runBrowserProfile(element)">
                            <mat-icon>play_arrow</mat-icon>
                        </button>
                    } @else if (browserLauncherService.getRunningStatus(element) == BrowserProfileStatus.Running) {
                        <button mat-icon-button app-stop-propagation (click)="stopBrowserProfile(element)">
                            <mat-icon>cancel</mat-icon>
                        </button>
                    }
                </div>
            </td>
        </ng-container>

        <!-- last used at -->
        <ng-container matColumnDef="lastUsedAt">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Launch</th>
            <td mat-cell *matCellDef="let element">
                {{ formatDateTime(element.lastUsedAt) }}
            </td>
        </ng-container>

        <!-- updated at -->
        <ng-container matColumnDef="updatedAt">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Last Update</th>
            <td mat-cell *matCellDef="let element">
                {{ formatDateTime(element.updatedAt) }}
            </td>
        </ng-container>

        <!-- created at -->
        <ng-container matColumnDef="createdAt">
            <th mat-header-cell *matHeaderCellDef mat-sort-header>Created</th>
            <td mat-cell *matCellDef="let element">
                {{ formatDateTime(element.createdAt) }}
            </td>
        </ng-container>

        <!-- header -->
        <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
        <tr mat-row *matRowDef="let element; columns: displayedColumns" (click)="toggleSelectProfile(element)"></tr>
    </table>
</main>

<router-outlet />
